.avue-sidebar {
    padding-top: 60px;
    height: 100%;
    position: relative;
    background-color: rgb(24,37,53);
    transition: width .6s;
    box-sizing: border-box;
    .el-menu-item,
    .el-submenu__title {
        font-size: 14px;
        height: 56px;
        line-height: 56px;
    }
    .el-menu-item {
        i,
        span {
            color: #fff !important;
        }
        &:hover {
            background-color: transparent !important;
            i,
            span {
                color: #409eff !important;
            }
        }
        &.is-active {
            background-color: rgba(0, 0, 0, .4) !important;
            
            &:hover {
                background-color: rgba(0, 0, 0, .4) !important;
            }
            &::before {
                content: " ";
                top: 0;
                left: 0;
                bottom: 0;
                width: 4px;
                background: $mainBg;
                position: absolute
            }
        }
    }
    .el-submenu__title {
        i,
        span {
            color: #fff !important;
        }
        &:hover {
            i,
            span {
                color: #409eff !important;
            }
            background-color:transparent !important;
        }
    }
    .el-submenu .el-menu-item {
        height: 50px;
        line-height: 50px;
        &.is-active {
            background-color: rgb(24,37,53) !important;
            &:hover {
                background-color: rgb(24,37,53) !important;
            }
        }
        &:hover {
            background-color: transparent !important;
            
        }
    }
}